<template>
	<view class="fill-width-height flex-row" :class="$thatThemeClassName" style="width: 100%;height: 100%;">
		<view class="body_card fill-width-height">
			<uv-grid :col="2">
				<uv-grid-item v-for="(url,index) in backDataList" :key="index">
					<view class="card fill-width" @click="goToEditPage(url)">
						<view class="card_body">
							<image
								mode="widthFix"
								:src="viewFile(url)"
								style="width: 100%"
								alt=""
							/>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, getCurrentInstance,ref } from "vue";
	import { getImgListByCode } from "@/api/home/index.js";
	import config from "@/config";
	
	const backDataList = ref([])
	const { appContext } = getCurrentInstance();
	
	function goToEditPage(itemUrl){
		
		if(!itemUrl?.startsWith('http')){
			let imgUrl = 'imgStore/openApi/previewByBussId?bussid=' + itemUrl + "&size=original";
			itemUrl = config.replacehUrl(imgUrl)
		}
		
		let imgUrl = encodeURIComponent(itemUrl)
		const url = `/pages/customwordlessImg/qrList/qrEdit?imgUrl=${imgUrl}`
		uni.navigateTo({
		  url: url 
		});
	}
	
	async function init(){
	  const dataList = await getImgListByCode({ code: 'qr'}).then(res => res.data )
	  backDataList.value = dataList
	}
	
	function viewFile(url){
		if(url?.startsWith('http') > 0){
			return url
		}
		return appContext.config.globalProperties.$getPreviewPath(url);
	}
	
	onMounted(init)
</script>

<style scoped lang="scss">
	.card_title{
		font-size: 17px;
		text-align: center;
		padding: 12px 10px;
		font-weight: bold;
		border-bottom: 1px solid #e4e7ed;
		background: #377ff5;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		color: white;
	}
	.body_card{
		:deep(.uv-grid-item){
			padding: 12px;
		}
	}
	.card{
		width: 100%;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
	}
</style>